{% extends "apostrophe-modal:base.html" %}
{% import "apostrophe-modal:macros.html" as modals %}
{% import 'apostrophe-ui:components/buttons.html' as buttons %}

{% block modalClass %}apos-reset-known-password-modal{% endblock %}

{% block controls %}
  <div class="apos-modal-controls">
    {{ buttons.minor('Cancel', { action: 'cancel' }) }}
    {{ buttons.major('Save', { action: 'save' }) }}
  </div>
{% endblock %}

{% block label %}
  {{ __ns('apostrophe', 'Reset Password') }}
{% endblock %}

{% block instructions %}
  <p>
    {{ __ns('apostrophe', 'Enter your existing password, then your new password.') }}
  </p>
{% endblock %}

{% block body %}
  {# AJAX shows and populates me #}
  <p data-server-side-error class="apos-reset-password-error"></p>
  <form>
    <fieldset data-field="existing-password">
      <label for="existing-password" data-apos-error-message="{{ __ns('apostrophe', 'Incorrect') }}">{{ __ns('apostrophe', 'Existing Password') }}</label><input name="existing-password" type="password" />
    </fieldset>
    <fieldset data-field="new-password">
      <label for="new-password" data-apos-error-message="{{ __ns('apostrophe', 'Invalid') }}">{{ __ns('apostrophe', 'New Password') }}</label><input name="new-password" type="password" />
    </fieldset>
    <fieldset data-field="new-password-confirm">
      <label for="new-password-confirm" data-apos-error-message="{{ __ns('apostrophe', 'Does Not Match') }}">Confirm New Password</label><input name="new-password-confirm" type="password" />
    </fieldset>
  </form>
{% endblock %}

{% block footerContainer %}{% endblock %}
